import { Button, DatePicker, Form, Input, Modal } from "antd";
import { useEffect, useRef, useState } from "react";
import SelectTestPaper from "./SelectTestPaper";
import SelectExaminees from "./SelectExaminees";

const AddExam = ({ open, onCancel, onOk }) => {
  const [exam, setExam] = useState({
    name: "",
    explain: "",
    beginTime: null,
    endTime: null,
    testPaperId: null,
    testPaperName: "",
    examinees: {
      departmentIds: [],
      jobIds: [],
      examineeIds: [],
    },
  });
  const [openSelectTestPaper, setOpenSelectTestPaper] = useState(false);
  const [openSelectExaminees, setOpenSelectExaminees] = useState(false);
  const submitBtn = useRef(null);
  const form = useRef(null);
  useEffect(() => {
    if (open) {
      setExam({
        name: "",
        explain: "",
        beginTime: null,
        endTime: null,
        testPaperId: null,
        testPaperName: "",
      });
      form.current.resetFields();
    }
  }, [open]);
  return (
    <Modal
      open={open}
      onCancel={onCancel}
      onOk={() => {
        submitBtn.current.click();
      }}
      title="添加考试安排"
      okText="添加"
      cancelText="取消"
    >
      <SelectTestPaper
        open={openSelectTestPaper}
        onCancel={() => setOpenSelectTestPaper(false)}
        onOk={(testPaper) => {
          setExam({
            ...exam,
            testPaperId: testPaper.id,
            testPaperName: testPaper.name,
          });
          setOpenSelectTestPaper(false);
        }}
      />
      <SelectExaminees
        open={openSelectExaminees}
        onCancel={() => setOpenSelectExaminees(false)}
        onOk={(examinees) => {
          console.log(examinees);
          setExam({ ...exam, examinees });
          setOpenSelectExaminees(false);
        }}
      />
      <Form
        ref={form}
        layout="horizontal"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        onFinish={async () => {
          onOk(exam);
        }}
      >
        <Form.Item
          label="考试名称"
          name="name"
          rules={[{ required: true, message: "请输入考试名称" }]}
        >
          <Input
            placeholder="请输入"
            value={exam.name}
            onChange={(e) => setExam({ ...exam, name: e.target.value })}
          />
        </Form.Item>
        <Form.Item
          validateFirst={true}
          label="开始时间"
          name="beginTime"
          rules={[
            { required: true, message: "请选择开始时间" },
            {
              validator: () => {
                if (exam.beginTime < new Date()) {
                  return Promise.reject("开始时间不能早于当前时间");
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <DatePicker
            style={{ width: "100%" }}
            showTime
            placeholder="请选择"
            value={exam.beginTime}
            onChange={(e) => {
              setExam({ ...exam, beginTime: new Date(e.$d) });
            }}
          />
        </Form.Item>
        <Form.Item
          label="结束时间"
          name="endTime"
          rules={[
            {
              validator: () => {
                if (exam.endTime !== null && exam.endTime < exam.beginTime) {
                  return Promise.reject("结束时间不能早于开始时间");
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <DatePicker
            showTime
            style={{ width: "100%" }}
            placeholder="请选择"
            value={exam.endTime}
            onChange={(e) => setExam({ ...exam, endTime: new Date(e.$d) })}
          />
        </Form.Item>
        <Form.Item
          label="试卷"
          name="testPaperId"
          required
          rules={[
            {
              validator: () => {
                if (exam.testPaperId === null) {
                  return Promise.reject("请选择试卷");
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <div>
            <Button onClick={() => setOpenSelectTestPaper(true)}>
              选择试卷
            </Button>
            <span>{exam.testPaperName}</span>
          </div>
        </Form.Item>
        <Form.Item
          label="考生"
          name={"examinees"}
          required
          rules={[
            {
              validator: () => {
                try {
                  if (
                    exam.examinees.examineeIds.length === 0 &&
                    exam.examinees.departmentIds.length === 0 &&
                    exam.examinees.jobIds.length === 0
                  ) {
                    return Promise.reject("请选择考生");
                  }
                } catch (e) {
                  console.log(e);
                  return Promise.reject("请选择考生");
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <div>
            <Button onClick={() => setOpenSelectExaminees(true)}>
              选择考生
            </Button>
            <span>
              {(() => {
                try {
                  return exam.examinees.examineeIds.length === 0 &&
                    exam.examinees.departmentIds.length === 0 &&
                    exam.examinees.jobIds.length === 0
                    ? ""
                    : "已选择";
                } catch (e) {
                  return "";
                }
              })()}
            </span>
          </div>
        </Form.Item>
        <Form.Item
          label="考试说明"
          name="explain"
          rules={[{ required: true, message: "请输入考试说明" }]}
        >
          <Input.TextArea
            placeholder="请输入"
            value={exam.explain}
            onChange={(e) => setExam({ ...exam, explain: e.target.value })}
          />
        </Form.Item>
        <button ref={submitBtn} style={{ display: "none" }}></button>
      </Form>
    </Modal>
  );
};
export default AddExam;
